/*
 * Script to manipulate the edge canvas
 */

var Choices = new Array();
var Edges = new Array();

window.onload = initCanvas;

function initCanvas () {
	var canvas = document.getElementById('edgeCanvas');
	var context = canvas.getContext("2d");
	
	var canvasHeight = canvas.height;
	var canvasWidth = canvas.width;
	
	var numLines = 5;
	
	computeLineLocations(numLines, canvasWidth);
	drawLines(context, 'green', canvasHeight);
	
	spaceChoiceLabels(numLines, canvasWidth);
	
	canvas.addEventListener("click", addEdgeListener, false);
}

/*
 * This function is triggered by the click event on the canvas.
 * It gets the position of the click and draws an edge between
 * the two closest lines.
 */
function addEdgeListener(event) {
	var clickPos = getClickPosition(event);
	var canvas = document.getElementById('edgeCanvas');
	var context = canvas.getContext("2d");
	
	var newEdge = createEdge(clickPos.x, clickPos.y);
	Edges.push(newEdge);
	
	drawEdge(context, 'blue', newEdge);
	
	sendEdge(newEdge);
}

function sendEdge(theEdge) {
	$.ajax({
	  type: 'POST',
	  url: '/api',
	  data: JSON.stringify(theEdge),
	  success: myCallback,
	  dataType: 'text'
	});
	
}

var myCallback = function(data) {
	var object = JSON.parse(data);
	alert('Left choice = ' + object.left + '  Right choice = ' + object.right + '  vPos = ' + object.vPos);
};

/*
 * This functions gets the position of the mouse click
 */
function getClickPosition(event) {
	var canvas = document.getElementById('edgeCanvas');
	if (event.x != undefined && event.y != undefined) {
		x = event.x;
		y = event.y;
	}
	else { /* code for firefox */
		x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}	
	x -= canvas.offsetLeft;
	y -= canvas.offsetTop;
	var clickPos = {x: x, y: y};
	return clickPos;
}

/*
 * This function draws a vertical line at each of the horizontal
 * positions in the Choices array.
 */
function drawLines(context, lineColor, canvasHeight) {
	context.strokeStyle = lineColor;
	context.lineWidth = 3;
	
	var i;
	for (i=0; i < Choices.length; i++) {
		context.beginPath();
		context.moveTo(Choices[i].position, 0);
		context.lineTo(Choices[i].position, canvasHeight);
		context.stroke();
	}
}

/*
 * This function determines where each line should be placed given
 * the number of lines and the width of the canvas.  It stores the
 * horizontal position of each of these lines in the Choices array.
 */
function computeLineLocations(numLines, canvasWidth) {
	numLines -= 2; /* will draw the left-most and right-most lines separately */
	Choices.push(new Choice("Choice", 1.5, 0));

	var dx = canvasWidth / (numLines + 1);
	var currXPos = 1.5;
	var currChoiceIndex = 1;
	
	while (numLines > 0) {
		currXPos += dx;
		Choices.push(new Choice("Choice", currXPos, currChoiceIndex));
		numLines--;
		currChoiceIndex++;
	}
	
	Choices.push(new Choice("Choice", canvasWidth - 1.5, currChoiceIndex));
}

/*
 * This function draws an edge between the two closest lines from
 * the given coordinate.
 */
function drawEdge(context, lineColor, theEdge) {
	context.strokeStyle = lineColor;
	context.lineWidth = 3;
	
	context.beginPath();
	context.moveTo(Choices[theEdge.left].position, theEdge.vPos);
	context.lineTo(Choices[theEdge.right].position, theEdge.vPos);
	context.stroke();
	/*
	var i;
	for (i=0; i < (Choices.length - 1); i++) {
		if ((xPos > Choices[i].position) && (xPos < Choices[i+1].position)) {
			context.beginPath();
			context.moveTo(Choices[i].position, yPos);
			context.lineTo(Choices[i + 1].position, yPos);
			context.stroke();
		}
	}*/
}

function createEdge(xPos, yPos) {
	var i;
	for (i=0; i < (Choices.length - 1); i++) {
		if ((xPos > Choices[i].position) && (xPos < Choices[i+1].position)) {
			return new Edge(Choices[i].index, Choices[i+1].index, yPos);
		}
	}
}

/*
 * Determine spacing for choice list items and set relevant CSS style
 */
function spaceChoiceLabels(numLines, canvasWidth) {
	var cssFile = document.styleSheets[0];
	//var spacing = canvasWidth / numLines; this doesn't work yet
	var spacing = 55;
	var i;
	
	for (i=0; i < cssFile.cssRules.length; i++) {
		if (cssFile.cssRules[i].selectorText=="#choiceList li") {
			cssFile.cssRules[i].style.margin="0 " + spacing + "px 0 0";
		}
	}
}
